<template>
  <ZZDialog class="navXZQH" title="地区导航" @close="callbackClose()">
    <div class="flex">
      <p style="width: 240px">地区：{{ breadcrumb.join(' / ') }}</p>
      <a @click="clear()">返回</a>
    </div>
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane label="省份" name="provinceTab">
        <div
          style="display: flex; justify-content: flex-start; align-items: baseline"
          v-for="key in ['A-G', 'H-K', 'L-S', 'T-Z']"
          :key="key"
        >
          <a style="width: 60px">{{ key }}</a>
          <div>
            <el-button link v-for="item in provinces[key]" :key="item.address" @click="provincesClick(item)">
              {{ item.address }}
            </el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="城市" name="cityTab">
        <div>
          <el-button link v-for="(name, code) in citys" :key="name" @click="citysClick({ code: code, address: name })">
            {{ name }}
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="区县" name="countryTab">
        <div>
          <el-button
            link
            v-for="(name, code) in countrys"
            :key="name"
            @click="countrysClick({ code: code, address: name })"
          >
            {{ name }}
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </ZZDialog>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
import { useViewer } from '@/stores/viewer';
import ZZDialog from '@/common/ZZDialog.vue';
import { ChineseDistricts } from './city-picker.data';

let viewer: any; //场景视图

const activeTab = ref('provinceTab');
const breadcrumb = ref<string[]>([]);
const provinces = ref<any>({});
const citys = ref('');
const countrys = ref('');
onBeforeMount(() => {
  viewer = useViewer().viewer;
});
onMounted(() => {
  provinces.value = ChineseDistricts['86'];
});
const provincesClick = (province: any) => {
  breadcrumb.value.length = 1;
  breadcrumb.value[0] = province.address;

  citys.value = ChineseDistricts[province.code];

  const tempUrl = 'http://data.marsgis.cn/file/geojson/xzqh/shi/' + province.code.toString().slice(0, 2) + '.json';
  goToGeojson(tempUrl);

  activeTab.value = 'cityTab';
};
const citysClick = (city: any) => {
  breadcrumb.value.length = 2;
  breadcrumb.value[1] = city.address;

  countrys.value = ChineseDistricts[city.code];
  const tempUrl = 'http://data.marsgis.cn/file/geojson/xzqh/xian/' + city.code + '.json';
  goToGeojson(tempUrl);

  activeTab.value = 'countryTab';
};
const countrysClick = (country: any) => {
  breadcrumb.value.length = 3;
  breadcrumb.value[2] = country.address;
};
const clear = () => {
  activeTab.value = 'provinceTab';
  breadcrumb.value.length = 0;
};

let geo_dataSource = undefined;
async function goToGeojson(tempUrl: any) {
  viewer.dataSources.removeAll();
  const geojson = (await fetch(tempUrl)).json();
  geo_dataSource = Cesium.GeoJsonDataSource.load(geojson, {
    clampToGround: true,
    stroke: new Cesium.Color.fromCssColorString('#ffffff'),
    strokeWidth: 2,
    fill: new Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.5)
  });
  geo_dataSource
    .then((dataSource: any) => {
      viewer.dataSources.add(dataSource);
      viewer.flyTo(dataSource.entities.values, { duration: 2 });
    })
    .catch((_error: any) => {});
}

const callbackClose = function () {
  viewer.dataSources.removeAll();
};
</script>
<style scoped lang="less">
.navXZQH {
  position: absolute;
  top: 100px;
  right: 200px;
  height: 500px;
  width: 300px;
}

.flex {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.el-button:first-child {
  margin-left: 12px;
}
</style>
